<template>
    <a-dropdown :trigger="['click']">
        <div class="lang">
            <i class="iconfont icon-earth"></i>
        </div>
        <template #overlay>
            <a-menu style="text-align: left;align-items: center;">
                <a-menu-item v-for="item in Lang" :key="item.value" @click="handleLang(item.value)" :class="item.value == local?'active':''">
                    <i class="iconfont icon-circle-fill" v-if="item.value == local" style="font-size: 8px;margin-right: 4px;"></i>
                    <i class="iconfont icon-circle" v-else style="font-size: 8px;margin-right: 4px;"></i>
                    <a href="javascript:void(0)">{{ item.label }}</a>
                </a-menu-item>
            </a-menu>
        </template>
    </a-dropdown>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Lang, _t } from '@/assets/lang/index.ts'
import { GetLanguage,SetLanguage } from '@/tool/common'
const local = ref<string>(GetLanguage())
const handleLang = (v:string) => {
    SetLanguage(v)
    window.location.reload()
}
</script>

<style lang="less">
    .ant-dropdown-menu {
        min-width:130px !important;
        .ant-dropdown-menu-item:not(:nth-child(1)) {
            margin-top: 3px !important;
        }
        .active {
            background-color: hsl(240, 5%, 96%);
        }
        .ant-dropdown-menu-title-content {
            display: flex !important;
            align-items: center !important;
        }
    }
</style>

<style lang="less" scoped>
.lang {
    font-size: 18px !important;
    height: 32px;
    width: 32px;
    cursor: pointer;
    transition-duration: .5s;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lang:hover {
    background-color: hsl(240, 5%, 96%);
    transition-duration: .5s;
}



</style>
